<template>
  <div class="images-list">
    <mt-navbar v-model="selectedTabItem">
      <mt-tab-item :id="item.id" v-for="item in imagesCategory" :key="item.id">{{ item.title }}</mt-tab-item>
    </mt-navbar>
    <!-- 图片区域 -->
    <div v-for="item in imagesList" :key="item.id" class="images-list-item" v-if="imagesList.length > 0" @click="handleImagesDetail(item.id)">
      <img src="http://cs-static-assets.oss-cn-beijing.aliyuncs.com/kaikeba/banner3.jpg" alt="images" />
      <div class="images-desc">
        <h3>{{ item.title }}</h3>
        <div class="zhai-yao">{{ item.zhaiyao }}</div>
      </div> 
    </div>
    <span>暂无数据</span>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex';
export default {
  data () {
    return {
      selectedTabItem: 0
    }
  },
  methods: {
    ...mapActions('home/imagesListStore', ['getImagesList', 'getImagesCategory']),
    handleImagesDetail (id) {
      this.$router.push({ name: 'imagesDetail', query: { detailId: id } });
    }
  },
  computed: {
    ...mapState('home/imagesListStore', ['imagesList', 'imagesCategory'])
  },
  watch: {
    selectedTabItem (newValue) {
      this.getImagesList({
        payload: {
          categoryId: newValue
        }
      })
    }
  },
  created () {
    this.getImagesCategory()
    this.getImagesList({
      payload: {
        categoryId: this.selectedTabItem
      }
    })
  }
};
</script>

<style scoped lang="less">
  .images-list {
    .mint-navbar {
        overflow: auto;
      }
    .images-list-item {
      height: 200px;
      position: relative;
      margin-bottom: 5px;
      img {
        width: 100%;
        height: 100%;
      }
      .images-desc {
        position: absolute;
        bottom: 0;
        color: lightblue;
        .zhai-yao {
          font-size: 12px;
        }
      }
    }
  }
</style>